import React from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

const Home = React.lazy(() => import('../pages/Home'))
const Fenlei = React.lazy(() => import('../pages/Fenlei'))
const Mi = React.lazy(() => import('../pages/Mi'))
const Car = React.lazy(() => import('../pages/Car'))
const My = React.lazy(() => import('../pages/My'))

import Tabbars from '../components/Tabbar'

const Tuijian = React.lazy(() => import('../pages/home/Tuijian'))
const Shouji = React.lazy(() => import('../pages/home/Shouji'))
const Zhineng = React.lazy(() => import('../pages/home/Zhineng'))
const Dianshi = React.lazy(() => import('../pages/home/Dianshi'))
const Jiadian = React.lazy(() => import('../pages/home/Jiadian'))

export default function AppRouter() {
    return (
        <div>
            {/* 配置一级路由 */}
            <BrowserRouter>
                {/* 底部标签栏 */}
                <Tabbars></Tabbars>
                <Routes>
                    <Route path='/home' element={<Home />}>
                        {/* 配置首页的二级路由 */}
                        <Route index  element={<Tuijian />} />
                        <Route path='/home/shouji' element={<Shouji />} />
                        <Route path='/home/zhineng' element={<Zhineng />} />
                        <Route path='/home/dianshi' element={<Dianshi />} />
                        <Route path='/home/jiadian' element={<Jiadian />} />
                    </Route>
                    <Route path='/fenlei' element={<Fenlei />} />
                    <Route path='/mi' element={<Mi />} />
                    <Route path='/car' element={<Car />} />
                    <Route path='/My' element={<My />} />
                    {/* 路由重定向 */}
                    <Route path='/' element={<Navigate to='/home' />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
